本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

首字放大在平面設計的領域中是經常可見的一種設計手法，也是司空見慣的方式了，不管是報章雜誌還是海報傳單都可以見到首字放大的設計風格，但是在網頁上面呢？好像不是這麼常見？事實上並不是不常見，而是你可以看的網頁太少了，其實在國外這樣的設計不算少見，反倒在國內比較少看到有這樣設計的網站，Amos 猜想大概是這個選取器太少用接觸了，又或者是網頁上面不盛行這樣的設計手法，不管如何，我個人是覺得這樣的設計其實蠻能夠聚焦的。

首字放大的問題

首字放大選取器的語法就是在目標上設定 ::first-letter，像是這樣 p::first-letter ，在早期微軟的 IE 盛行的時代寫法會是 :first-letter，這樣看來應該是個僞類選取器，但實際上後面已更正為雙冒號的僞元素，在實作首字放大時我們會遇到首字放大了，但是卻出現排列效果不佳的狀況，例如以下原始碼

HTML

<p>
Amos 每次挑戰鐵人賽都一次挑戰兩個主題，曾經有人問 Amos 說，為什麼你不一次挑戰一個就好，挑戰兩個不是比較累嗎？況且挑戰鐵人賽又沒有錢，為什麼要這樣挑戰連續三十天發文不中斷？我心想你一定是個很自律的人，所以不用靠鐵人挑戰逼迫自己寫點東西來，另外挑戰雙主題的問題啊，如果今天有兩個主題給你挑，你會想要挑哪一個？傻瓜！小孩子才做選擇，我當然是全都要啊（咦）
</p>
<p>
因為假文的內容實在太難看了，所以我花了一點時間打了這一段廢話，廢話看起來會更像正常的對話，我都這麼有誠意有耐心地把字打完了，你還不訂閱我的文章就太說不過去了，不果獎真的你可以看到這邊也表示妳很有耐心，給你鼓掌一下，然後...訂閱文章給他按下去，知道嗎！那我到底打那麼多字的真正原因是什麼呢？其實我只是想要讓第一個字有中文跟英文的對照可以讓你看而已。
</p>

CSS

p{
  font-size: 16px;
  line-height: 1.7;
}
p:first-letter{
	font-size:50px;
}

因為首字放大了，但是他的垂直對齊位置依舊是文字基線，所以沒有出現我們預想的那種平面設計的視覺排版外觀，要達到平面設計的首字放大效果，我們必須多加幾行原始碼，要讓首字具備有文繞圖的功能，這樣才能讓視覺看起來開始像是平面設計會看到的樣子

CSS

p{
  font-size: 16px;
  line-height: 1.7;
}
p::first-letter{
  font-size:48px;
  float: left;
  line-height: .7;
  margin: .2em;
}

恩～樣子開始有點像囉，在這個例子中為了讓各位可以看到中英文在首字放大中的視覺效果，所以用了兩段文字給各位看，實際案例可以看到整個效果真的是好多了，在現今眾多開發者推崇 flex 排版的情形下，float 技巧有如過街老鼠人人喊打，但其實只要用的巧用的好，float 可是非常好用的喔！float 本身就是在做文繞圖居多，所以這邊利用了 float 的基本特性就能完成了，而且我們也可以利用 float 所造成的 CSS BFC 特性做更多的變化與應用。

更多的應用

有了上面的效果之後，讓我們的設計更偏向平面設計風格看看，有時候我們會在放大的首字背後墊一個色塊，好更加的突顯那個放大的首字份量， 對於視覺焦點的營造也更加的清楚，既然是裝飾性的項目，那我們就可以利用僞類來做啦！我們可以在 p 標籤設定一個僞類，並利用定位的技巧來達到我們所要的目的。原始碼可以參考下面這樣

p::before{
  content:'';
  position: absolute;
  width: 2.5em;
  height: 2.5em;
  background-color: #ccc;
  left: 0;
  top: -5px;
}

但是一但添加了絕對定位，這時候就會有「定位在哪個空間」內的問題，因為是每個段落的首字被放大，所以當然就是定在每個段落了，這時候父層給他添加一個相對定位就搞定啦，像是以下這段原始碼

p{
  font-size: 16px;
  line-height: 1.7;
  position: relative;
}

然後你又發現了！為何我的文字被蓋住了？如果你懂定位的特性的話，大概也會知道「具備定位設定的物件其層級會比沒有定位設定的物件高」，所以色塊蓋住了文字也是非常合理的，解決方式當然就是用另外一個定位設定更高的層級啦。所以我們需要這樣設定

p::first-letter{
  ...略
  /*添加下方兩行*/
  position: relative;
  z-index: 1;
}
p::before{
    ...略
    z-index: -1;
}

搞定！！真是漂亮多了！又或者你覺得這樣的效果不夠好，墊底色塊想增加圓角也可以啦，那就補個圓角設定給僞類就好囉。

p::before{
  ...略
  border-radius: 50%;
}

是不是非常有趣的玩法呢？各位有做過怎樣的設計呢？歡迎一起下方留言討論喔。

以上就是今天的 金魚都能懂的 CSS 選取器 - :first-letter 首字選取器，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

鐵人雙主題挑戰中，歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學